<template>
  <div>
    <a-drawer
      width="700"
      :maskClosable="false"
      :visible="addData.show"
      direction="rtl"
      @close="handleClose"
    >
      <div slot="title">
        <!-- <i class="el-icon-arrow-left"></i> -->
        <span>{{addData.title}}</span>
      </div>
      
      <el-row style="width:700px;padding-bottom:150px;height:100%;overflow-y:auto">
        <el-col :span="20">
          <el-form
            :model="parames"
            :rules="rules"
            label-position="left"
            ref="parames"
            label-width="120px"
            class="addForm"
            size="small"
          >
            <el-row :gutter="40" style="padding: 0 40px;margin-top:30px">
              <el-col :span="24">
                <el-form-item label="产品类型:" prop="productServiceType">
                    <el-select style="width:100%" v-model="parames.productServiceType" placeholder="请选择">
                      <el-option v-for="(item,index) in productServiceTypeData" :key="index" :label="item.desc" :value="item.name"></el-option>
                    </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="产品板块:" prop="productId">
                    <el-select style="width:100%" v-model="parames.productId" placeholder="请选择">
                      <el-option v-for="(item,index) in product" :key="index" :label="item.productName" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="产品价格:" prop="lowerPriceLimit">
                    <el-input style="width:100px" type="number" v-model="parames.lowerPriceLimit"></el-input> 至
                    <el-input style="width:100px" type="number" v-model="parames.upperPriceLimit"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                  <el-form-item label="产品单位:" prop="productUnit">
                    <el-select style="width:100%" v-model="parames.productUnit" placeholder="请选择">
                      <el-option v-for="(item,index) in productUnit" :key="index" :label="item.desc" :value="item.name"></el-option>
                    </el-select>
                  </el-form-item>
              </el-col>
              <el-col :span="24">
                  <el-form-item label="产品环节:" prop="productLink">
                      <el-select style="width:100%" v-model="parames.productLink" placeholder="请选择">
                        <el-option :disabled="(parames.productServiceType == 'BOOK_KEEPING' && (item.name == 'NEW' || item.name == 'ORDINARY')) || (parames.productServiceType == 'DISPOSABLE' && item.name == 'STANDARD')" v-for="(item,index) in productLink" :key="index" :label="item.desc" :value="item.name"></el-option>
                      </el-select>
                      <p v-for="(item,index) in productLink" :key="index+111">
                        <span v-if="parames.productLink == item.name">环节说明：{{item.process}}</span>
                      </p>
                  </el-form-item>
              </el-col>
              <el-col :span="24">
                  <el-form-item label="产品是否上架:" prop="onSale">
                    <el-radio v-model="parames.onSale" :label="true">是</el-radio>
                    <el-radio v-model="parames.onSale" :label="false">否</el-radio>
                  </el-form-item>
              </el-col>
              <el-col :span="24">
                  <el-form-item label="产品概述:">
                    <el-input type="textarea" v-model="parames.productOverview"></el-input>
                  </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
      </el-row>

      <div class="from-bottom-box">
        <el-button size="small" :loading="loadingBtn" type="primary" @click="handleSend('1')" v-if="addData.type == 'new'">保存并继续添加</el-button>
        <el-button size="small" :loading="loadingBtn" type="primary" @click="handleSend('2')">保存</el-button>
        <el-button size="small" @click="handleClose">取消</el-button>
      </div>
    </a-drawer>
  </div>
</template>

<script>
export default {
  props: ["addData"],
  data() {
    var price = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('必填'));
        } else if (value !== this.ruleForm.pass) {
            callback(new Error('两次输入密码不一致!'));
        } else {
            callback();
        }
    };
    return {
        product: [],
        loadingBtn: false,
        productUnit: [], //产品单位
        productLink: [], //产品环节
        productServiceTypeData: [],
        parames: {
            id: '',
            productServiceType: '', //产品类型
            productId: '', //产品ID
            productOverview: '', //产品概述
            upperPriceLimit: '', //价格上限(数字)
            lowerPriceLimit: '', //价格下限(数字)
            productUnit: '', //产品单位(枚举)
            productLink: '', //产品环节(枚举)
            onSale: true, //产品是否上架(布尔)
        },
        rules: {
            productServiceType: [{ required: true, message: "必填", trigger: ["blur","change"] }],
            productId: [{ required: true, message: "必填", trigger: ["blur","change"] }],
            lowerPriceLimit: [
                { validator: (rule, value, callback) => {
                    if (value == '' || this.parames.upperPriceLimit == '' ) {
                        callback(new Error('必填'));
                    } else if (value-this.parames.upperPriceLimit>0) {
                      console.log(value,this.parames.upperPriceLimit)
                        callback(new Error('下限不能大于上限'));
                    } else {
                        callback()
                    }
                }, trigger: 'blur' }
            ],
            productUnit: [{ required: true, message: "必填", trigger: ["blur","change"] }],
            productLink: [{ required: true, message: "必填", trigger: ["blur","change"] }],
            onSale: [{ required: true, message: "必填", trigger: ["blur","change"] }],
        }
    }
  },
  methods: {
    addUser () { //添加新成员
      this.searchData.show = true
    },
    handleClose() {
      //关闭弹窗
      this.addData.show = false;
    },
    handleSend (type) { //提交信息
      this.$refs['parames'].validate((valid) => {
        if (valid) {
          this.loadingBtn = true
          if (this.addData.type == 'new') {
            this.$post(this.$api.postProviderProductAdd,this.parames).then(response => {
              if (response.data.succeed) {
                this.$emit('checkRender')
                if (type == '2') {
                  this.handleClose()
                } else {
                  this.restData()
                }
              }
            })
          } else if (this.addData.type == 'edit') {
            this.$post(this.$api.postProviderProductEdit,this.parames).then(response => {
                if (response.data.succeed) {
                    this.$emit('checkRender')
                    this.handleClose()
                }
            })
          }
          setTimeout(() => {
            this.loadingBtn = false
          }, 300);
        }
      })
    },
    getProduct () { //获取产品下拉数据
        this.$post(this.$api.postBaseInfoProductList).then(response => {
            if (response.data.succeed) {
                this.product = response.data.data
            }
        })
    },
    render () {
      if (this.addData.type == 'edit') {
        this.$post(this.$api.postProviderProductFind,{
            providerProductId: this.addData.id
        }).then(response => {
            if (response.data.succeed) {
                let data = response.data.data
                this.parames.id = data.id
                this.parames.productId = data.productId //产品ID
                if (data.productServiceType) {
                  this.parames.productServiceType = data.productServiceType.name //产品类型
                }
                this.parames.productOverview = data.productOverview //产品概述
                this.parames.upperPriceLimit = data.upperPriceLimit //价格上限(数字)
                this.parames.lowerPriceLimit = data.lowerPriceLimit //价格下限(数字)
                this.parames.productUnit = data.productUnit.name //产品单位(枚举)
                this.parames.productLink = data.productLink.name //产品环节(枚举)
                this.parames.onSale = data.onSale //产品是否上架(布尔)
            }
        })
      }
    },
    restData () { //重置数据
        this.parames.id = ''
        this.parames.productServiceType = ''
        this.parames.productId = '' //产品ID
        this.parames.productOverview = '' //产品概述
        this.parames.upperPriceLimit = '' //价格上限(数字)
        this.parames.lowerPriceLimit = '' //价格下限(数字)
        this.parames.productUnit = '' //产品单位(枚举)
        this.parames.productLink = '' //产品环节(枚举)
        this.parames.onSale = true //产品是否上架(布尔)
        this.$refs.parames.resetFields()
    }
  },
  computed: { //计算属性
    changeDialog () {
      return this.addData.show
    }
  },
  watch: {
    changeDialog: {
      handler (curVal, oldVal) {
        if (curVal) {
            this.getProduct()
          this.$utils.getEnumberation('postProviderProductProductServiceType','productServiceTypeData',this) //产品类型
          this.$utils.getEnumberation('postProviderProductProductUnit','productUnit',this) //产品单位
          this.$utils.getEnumberation('postProviderProductProductLink','productLink',this) //产品环节
          this.render()
        } else {
          this.restData()
        }
      }
    },
    deep: true
  }
};
</script>

<style scoped>
</style>
